import { ref, computed } from 'vue'

import * as echarts from 'echarts'
var linearGradient = (startColor: string, endColor: string): any => {
    return new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
            {
                offset: 0,
                color: startColor, // 0% 处的颜色
            },
            {
                offset: 1,
                color: endColor, // 100% 处的颜色
            },
        ],
        false
    )
}

export default function () {

    const chartOptionsLine = ref<any>({})

    const chartOptionsLine2 = ref<any>({})

    /**
     * 生成曲线图
     * @param targetValue 目标等级
     * @param arr 数值数组
     */
    const initChartLine = (targetValue: number, arr: number[]) => {

        const levelList: number[] = [];

        for (let index = 0; index < targetValue; index++) {
            levelList.push(index + 1);
        }

        console.log(levelList);


        chartOptionsLine.value = {
            backgroundColor: "transparent",
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "line",
                    shadowStyle: {
                        color: "rgba(17,71,137,0.2)",
                    },
                },
                borderWidth: 0,
                padding: 10,
                backgroundColor: "rgba(0,0,0,1)",
                textStyle: {
                    color: "#fff",
                    fontSize: 12,
                }
            },
            grid: {
                top: "20%",
                right: "3%",
                left: "6%",
                bottom: "20%",
            },
            xAxis: [
                {
                    // name: `等级`,
                    type: "category",
                    data: [...levelList],
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,0.12)",
                        },
                    },
                    axisLabel: {
                        margin: 10,
                        color: "#95B6CD",
                        fontSize: 12,
                    },
                },
            ],
            yAxis: [
                {
                    name: `数值`,
                    minInterval: 1,
                    nameTextStyle: {
                        align: "left",
                        color: "#95B6CD",
                        opacity: 1,
                    },
                    axisLabel: {
                        formatter: "{value}",
                        color: "#95B6CD",
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(67,132,235,.2)",
                        },
                    },
                },
            ],
            series: [
                {
                    // name: "CO₂减排",
                    type: "line",
                    data: arr,
                    barWidth: "10px",
                    stack: 1,
                    smooth: true,
                    symbol: 'none',
                    itemStyle: {

                        color: linearGradient("#64FFEB", "#1ADEB2"),
                        shadowColor: "rgba(0,160,221,1)",
                        shadowBlur: 4,
                        position: "top",
                    },
                    areaStyle: {
                        color: linearGradient("rgba(33,124,231,.6)", "rgba(33,124,231,.1)"),
                    },
                    lineStyle: {
                        color: "rgba(33,124,231,1)"
                    }
                },
            ],
        };
    }
    /**
     * 生成曲线图
     * @param targetValue 目标等级
     * @param arr 数值数组
     */
    const initChartLine2 = (targetValue: number, arr: number[]) => {

        const levelList: number[] = [];

        for (let index = 0; index < targetValue; index++) {
            levelList.push(index + 1);
        }

        console.log(levelList);


        chartOptionsLine2.value = {
            backgroundColor: "transparent",
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "line",
                    shadowStyle: {
                        color: "rgba(17,71,137,0.2)",
                    },
                },
                borderWidth: 0,
                padding: 10,
                backgroundColor: "rgba(0,0,0,1)",
                textStyle: {
                    color: "#fff",
                    fontSize: 12,
                }
            },
            grid: {
                top: "20%",
                right: "3%",
                left: "6%",
                bottom: "20%",
            },
            xAxis: [
                {
                    // name: `等级`,
                    type: "category",
                    data: [...levelList],
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,0.12)",
                        },
                    },
                    axisLabel: {
                        margin: 10,
                        color: "#95B6CD",
                        fontSize: 12,
                    },
                },
            ],
            yAxis: [
                {
                    name: `数值`,
                    minInterval: 1,
                    nameTextStyle: {
                        align: "left",
                        color: "#95B6CD",
                        opacity: 1,
                    },
                    axisLabel: {
                        formatter: "{value}",
                        color: "#95B6CD",
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(67,132,235,.2)",
                        },
                    },
                },
            ],
            series: [
                {
                    // name: "CO₂减排",
                    type: "line",
                    data: arr,
                    barWidth: "10px",
                    stack: 1,
                    smooth: true,
                    symbol: 'none',
                    itemStyle: {

                        color: linearGradient("#64FFEB", "#1ADEB2"),
                        shadowColor: "rgba(0,160,221,1)",
                        shadowBlur: 4,
                        position: "top",
                    },
                    areaStyle: {
                        color: linearGradient("rgba(33,124,231,.6)", "rgba(33,124,231,.1)"),
                    },
                    lineStyle: {
                        color: "rgba(33,124,231,1)"
                    }
                },
            ],
        };
    }
    return {
        chartOptionsLine,
        chartOptionsLine2,
        initChartLine2,
        initChartLine,
    }
}